<template>
	<view class="gift">
		<view class="gift-user">
			<image src="https://cdn.uviewui.com/uview/album/1.jpg" mode=""></image>
			<text>{{orderInfo.UserName}}</text>
		</view>
		<view class="gift-notes" v-if="orderInfo.Remark!==''">
			<text>备注</text>
			<text class="f-28">{{orderInfo.Remark}}</text>
		</view>
		<scroll-view scroll-y="true" :style="{height: clientHeight +'rpx'}">
			<view class="gift-list">
				<view class="gift-list-item" v-for="(item,index) in goodsList" :key="index">
					<view class="gift-list-item-top">
						<view class="gift-list-item-top-left">
							<image :src="item.ProductImg? item.ProductImg :'../../static/img/1.png'" mode=""></image>
						</view>
						<view class="gift-list-item-top-right">
							<view class="gift-list-item-top-right-header u-line-2">
								产品名称：{{item.ProductName}}
							</view>
							<view class="gift-list-item-top-right-center">
								类型：{{item.Style}}
							</view>
							<view class="gift-list-item-top-right-footer">
								<view class="gift-list-item-top-right-footer-left">
									<text class="f-24">￥</text>
									<text>{{item.Price}}</text>
								</view>
							</view>
						</view>
						<view class="static" v-if="orderInfo.Status==0">
							未接收
						</view>
						<view class="static" v-else-if="orderInfo.Status==2">
							已接收
						</view>
						<view class="static" v-else-if="orderInfo.Status==-1">
							已拒绝
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="gitf-btn" v-if="!isAccept">
			<view class="gitf-btn1" v-if="orderInfo.Status==0">
				<view class="gitf-btn-left" @click="onAccept">
					接收礼物
				</view>
				<view class="gitf-btn-right" @click="onRefuse">
					拒绝
				</view>
			</view>
			<view class="gitf-btn1" v-else-if="orderInfo.Status==2">
				<view class="gitf-btn-right1">
					已接收商品礼物
				</view>
			</view>
			<view class="gitf-btn1" v-else-if="orderInfo.Status==-1">
				<view class="gitf-btn-right1">
					已拒绝接收礼物
				</view>
			</view>
		</view>
		<view class="gitf-address" v-else>
			<view class="git-address-not">
				<view class="gitf-address-title">
					<text>请填写接收礼物详细信息</text>
				</view>
				<view class="gitf-address-content">
					<view class="gitf-address-content-input">
						<text class="w-20">姓名</text>
						<input type="text" v-model="userName" placeholder="请输入姓名">
					</view>
					<view class="gitf-address-content-input">
						<text class="w-20">手机号</text>
						<input type="number" v-model="phone" placeholder="请输入手机号">
					</view>
					<view class="gitf-address-content-input" @click="showCity = true">
						<text class="w-20">地区</text>
						<input type="text" disabled v-model="cityStr" placeholder="点击选择地区">
					</view>
					<view class="gitf-address-content-input">
						<text class="w-20">地址</text>
						<input type="text" v-model="addressInfo" placeholder="请输入详细地址">
					</view>
				</view>
			</view>
			<view class="gitf-address-btn" @click="onSubmit">
				确认接收
			</view>
		</view>

		<u-picker :show="showCity" @cancel="showCity = false" immediateChange ref="uPicker" :columns="cityList"
			@change="changeHandler" @confirm="setCity"></u-picker>
	</view>
</template>

<script>
	import address from './address.js';
	export default {
		data() {
			return {
				index: -1, //索引
				city: '', //选中城市,
				province: '', //选中省份
				userName: '', //收货人名字
				phone: '', //收货电话号码
				addressInfo: '', //收货地址详情
				orderInfo: {}, //订单详情
				orderID: -1, //订单id
				cityStr: '', //选择城市字符串
				cityList: [], //城市列表
				showCity: false, //是否展示城市弹出层
				addressList: [], //收货地址
				isAccept: false, //是否同意
				clientHeight: 348, //scroll的高度
				// 选中商品数组
				goodsList: []
			}
		},

		onLoad(e) {
			// console.log('信息', e)
			// console.log('订单id', decodeURIComponent(e.order))
			let order = JSON.parse(decodeURIComponent(e.order))
			// console.log(order);
			this.index = order.index
			this.orderID = order.orderID
			this.getOrderInfo()
			let add = address;
			let arr1 = add.map(item => item.name);
			let arr2 = add[0].children.map(item => {
				if (item.name == '市辖区' || item.name == '县') {
					return '--';
				} else {
					return item.name;
				}
			});
			this.cityList = [arr1, arr2];
		},
		methods: {
			// 获取订单详情
			async getOrderInfo() {
				let res = await this.$api.post('Order/Detail', {
					ID: this.orderID,
				});
				console.log('订单详情', res)
				this.orderInfo = res.data
				this.goodsList = res.data.Item
				if (this.orderInfo.Delivery_Accepter) {
					this.userName = this.orderInfo.Delivery_Accepter
					this.phone = this.orderInfo.Delivery_Phone
				}
			},
			// 选择城市
			setCity(e) {
				console.log('城市', e)
				if (e.value[1] === '--') {
					this.cityStr = e.value[0];
					this.city = e.value[0]
				} else {
					this.cityStr = e.value[0] + ' ' + e.value[1];
					this.province = e.value[0]
					this.city = e.value[1]
				}
				this.showCity = false;
			},
			// 城市选项发生改变逻辑
			changeHandler(e) {
				console.log(e);
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) {
					picker.setColumnValues(
						1,
						address[index].children.map(item => {
							if (item.name == '市辖区' || item.name == '县') {
								return '--';
							} else {
								return item.name;
							}
						})
					);
				}
			},
			// 接受商品礼物
			onAccept() {
				this.isAccept = true
			},
			// 点击确认接收
			async onSubmit() {
				let {
					orderID,
					userName,
					addressInfo,
					phone,
					province,
					city
				} = this

				if (!userName) {
					this.$pv.msg('请输入名字')
				} else if (!phone) {
					this.$pv.msg('请输入手机号')
				} else if (!this.isPhone(phone)) {
					this.$pv.msg('请输入正确的手机号')
				} else if (!city) {
					this.$pv.msg('请选择地区')
				} else if (!addressInfo) {
					this.$pv.msg('请输入详细地址')
				} else {
					let res = await this.$api.post('Order/UpdateAddress', {
						ID: orderID,
						Delivery_Accepter: userName,
						Delivery_Address: this.cityStr + addressInfo,
						Delivery_Phone: phone,
						// Delivery_Province: province || '',
						// Delivery_City: city,
					});
					uni.$emit('goodsGiftSUb', this.index)
					uni.navigateBack()
				}
			},
			// 点击拒绝接收
			async onRefuse() {
				let res = await this.$api.post('/Order/Reject', { ID: this.orderID })
				uni.$emit('goodsGiftSUb', -1)
				uni.navigateBack()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.gift {
		width: 100%;
		padding: 40rpx;
		box-sizing: border-box;

		&-user {
			display: flex;
			margin-bottom: 40rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 100%;
				margin-right: 20rpx;
			}

			text {
				margin-top: 20rpx;
			}
		}

		.gift-notes {
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;

			.f-28 {
				font-size: 28rpx;
			}
		}

		.gift-list {
			width: 100%;

			.gift-list-item {
				padding: 20rpx 0;
				margin-bottom: 20rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				border-bottom: 2rpx solid #d2d2d2;

				.gift-list-item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 176rpx;

					.gift-list-item-top-left {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						// margin-right: 20rpx;
						width: 26%;

						image {
							width: 130rpx;
							height: 130rpx;
						}
					}

					.static {
						font-size: 36rpx;
						color: #ecd5a0;
					}

					.gift-list-item-top-right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.gift-list-item-top-right-header {
							color: #ffffff;
							font-size: 28rpx;
							height: 72rpx;
						}

						.gift-list-item-top-right-center {
							font-size: 24rpx;
							margin-top: 16rpx;
						}

						.gift-list-item-top-right-footer {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.gift-list-item-top-right-footer-left {
								display: flex;
								align-items: center;

								text {
									color: #B98B51;
								}

								.f-24 {
									font-size: 24 rpx;
								}
							}


						}
					}
				}


			}
		}

		.gitf-btn {
			margin-top: 40rpx;

			.gitf-btn1 {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
			}

			.gitf-btn-left {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 18rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #4C310C;
				width: 200rpx;
				height: 80rpx;
			}

			.gitf-btn-right,
			.gitf-btn-right1 {
				border-radius: 10rpx;
				color: #fff;
				font-size: 28rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #B98B51
			}

			.gitf-btn-right {
				width: 200rpx;
				height: 80rpx;
			}

			.gitf-btn-right1 {
				width: 300rpx;
				height: 80rpx;
			}
		}

		.gitf-address {
			margin-top: 40rpx;

			&-btn {
				margin: 20rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 18rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #4C310C;
				width: 500rpx;
				height: 80rpx;
			}

			.git-address-not {
				.gitf-address-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.gitf-address-content {
					width: 100%;

					.w-20 {
						width: 20%;
					}

					&-input {
						display: flex;
						align-items: center;
						border-bottom: 2rpx solid #d2d2d2;
						padding: 20rpx 0;

						input {
							flex: 1;
						}
					}
				}
			}

			.git-address-have {
				display: flex;
				flex-direction: column;

				.m-r-10 {
					margin-right: 10rpx;
				}

				.l-s {
					letter-spacing: 2rpx;
				}

				.f-28 {
					font-size: 28rpx;
				}

				.git-address-have-header {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

				}

				.git-address-have-footer {
					font-size: 24rpx;
				}
			}
		}
	}
</style>